<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          plain-->
        <!--          icon="el-icon-look"-->
        <!--          size="mini"-->
        <!--          @click="getOrderList"-->
        <!--        >我的订单-->
        <!--        </el-button>-->
        <div class="opear">
          <div class="bigButton"  @click="getOrderList" style="background: url('https://xhycc.hnthwh.com/psychology/project/button.png') no-repeat  70% 40%">
            我的订单
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="magazineList">
      <!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="期刊名称" align="center" prop="magazineName"/>
      <el-table-column label="期刊封面" align="center" prop="magazineCover">
        <template slot-scope="scope">
          <image-preview :src="scope.row.magazineCover" :height="100"/>
        </template>
      </el-table-column>
      <el-table-column label="价格(元)" align="center" prop="price"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="opear">
            <div class="bigButton"  @click="addOrder(scope.row)"
                 style="background: url('https://xhycc.hnthwh.com/psychology/project/button.png') no-repeat  70% 61%">
              下单
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body center>
      <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
        <div class="foundation">
          <h2>数量</h2>
        </div>
        <div class="num">
          <el-form-item label="数量">
            <el-input-number v-model="formData.num" :min="1" :max="100" label="请输入数量"
                             size="small"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="总价">
            <div class="totalprice">{{ totalPrice }} 元</div>
          </el-form-item>
        </div>
        <div class="foundation">
          <h2>基本信息</h2>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="姓名" prop="custumerName">
              <el-input v-model="formData.custumerName" placeholder="请输入姓名" :maxlength="6" clearable
                        prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                        prefix-icon="el-icon-mobile"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="固定电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入固定电话" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable
                        prefix-icon="el-icon-document-remove" :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="company">
              <el-input v-model="formData.company" placeholder="请输入单位或学校全称" clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="foundation">
          <h2>邮寄地址</h2>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="选择城市" prop="city">
              <el-select v-model="formData.city" placeholder="选择城市(仅限河南省内)" clearable
                         :style="{width: '100%'}"
              >
                <el-option v-for="(item, index) in cityList" :key="index" :label="item.CITY"
                           :value="item.CITY"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入收获地址" clearable
                        prefix-icon="el-icon-add-location"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人" prop="receiver">
              <el-input v-model="formData.receiver" placeholder="请输入收件人姓名" clearable
                        prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编" prop="postcode" label-width="50px" style="margin-left: 30px">
              <el-input v-model="formData.postcode" placeholder="请输入邮编" clearable
                        prefix-icon="el-icon-postcard"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="info">
          <p>* 如果学校通过邮局征订，请勾选下面选项</p>
          <p>* 邮局征订不必在本系统扫码付款，仅需提交订阅信息即可。</p>
        </div>
        <el-checkbox v-model="formData.payType" true-label="1" false-label="0" :border="true" size="medium "
                     style="margin-top:10px"
        >邮局征订
        </el-checkbox>
        <div class="ticker" v-show="formData.payType==0">
          <div class="foundation">
            <h2>开票信息</h2>
          </div>
          <div class="info">
            <p>* 如需要发票，请填写发票信息，我们会在2个工作日内将发票发至您的邮箱</p>
          </div>
          <el-row>
            <el-col :span="7">
              <el-form-item label="发票抬头" prop="invoiceTitle">
                <el-input v-model="formData.invoiceTitle" placeholder="请输入发票抬头" clearable
                          prefix-icon="el-icon-postcard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="税号" prop="taxNo" label-width="40px">
                <el-input v-model="formData.taxNo" placeholder="请输入税号" clearable
                          prefix-icon="el-icon-postcard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="备注" prop="remarks" label-width="40px">
                <el-input v-model="formData.remarks" placeholder="选填" clearable
                          prefix-icon="el-icon-postcard"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提交订单</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 订单列表对话框 -->
    <el-dialog :title="orderTitle" :visible.sync="orderOpen" width="1600px" append-to-body center>
      <el-table v-loading="loading" :data="orderList">

        <el-table-column label="订阅人姓名" align="center" prop="custumerName"/>
        <el-table-column label="订阅人手机号码" align="center" prop="mobile"/>
        <el-table-column label="杂志名称" align="center" prop="magazineName" width="250"/>
        <el-table-column label="状态" align="center" prop="statue">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.magazine_order_statue" :value="scope.row.statue"/>
          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" prop="totalPrice"/>
        <el-table-column label="收货地址" align="center" prop="address" width="400"/>
        <el-table-column label="快递单号" align="center" prop="trackingNum"/>
        <el-table-column label="订单处理" align="center" class-name="small-padding fixed-width" width="400">
          <template slot-scope="scope">
            <div class="opear">
              <div class="bigButton" v-show="scope.row.payType==0 && scope.row.statue==0" @click="handPay(scope.row)"
                   style="background: url('https://xhycc.hnthwh.com/psychology/project/button.png') no-repeat  15% 86%"
              >
                立刻付款
              </div>
              <el-button
                v-show="scope.row.statue!=2"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdateOrder(scope.row)"
                v-hasPermi="['magazine:order:edit']"
              >修改
              </el-button>
              <el-button
                v-show="scope.row.statue!=2"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteOrder(scope.row)"
                v-hasPermi="['magazine:order:remove']"
              >删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 付款对话框 -->
    <el-dialog title="付款" :visible.sync="payOpen" width="800px" append-to-body center>
      <div class="collection">
        收款方： 《中小学心理健康教育》河南工作站 ——河南天虹文化传媒有限公司
      </div>
      <div class="attention">
        <p>【请在扫码完成后填充一下信息】</p>
        <p> 缴费项目：选择《中小学心理健康教育》</p>
        <p> 缴费金额：{{ sumMoney }} 元</p>
        <p> 缴费人姓名：{{ formData.custumerName }}
        <p> 缴费人电话：{{ formData.mobile }}</p>
        <p> * 如您需要对公转账，请扫码后选择“转账支付”方式， 根据显示的对公账号进行转账缴费。</p>
        <p>$ 请不要重复付款 如已付款，我们会在2个工作日内处理 请您耐心等待，谢谢。</p>
      </div>
      <div class="paycode">
        <image-preview :src="payCode" :width="300" :height="380"></image-preview>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listMagazine } from '@/api/magazine/magazine'
import { getOrder, delOrder, addOrder, updateOrder, listUserOrder } from '@/api/magazine/order'
import cityList from '@/assets/city.json'
import payCode from '@/assets/pay/pay_code.png'

export default {
  name: 'Magazine',
  dicts: ['magazine_order_statue'],
  computed: {
    totalPrice: {
      get: function() {
        let totalMoney = this.formData.num * this.currentPrice
        this.formData.totalPrice = totalMoney
        return totalMoney
      }
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      // 总条数
      total: 0,
      // 杂志管理表格数据
      magazineList: [],
      // 弹出层标题
      title: '',
      orderTitle: '',
      // 是否显示弹出层
      open: false,
      //订单列表对话框
      orderOpen: false,
      //付款对话框
      payOpen: false,
      // 订单表格数据
      orderList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        slae: null
      },
      currentPrice: 0,
      sumMoney: 0,
      cityList: cityList.RECORDS,
      formData: {},
      rules: {
        receiver: [{
          required: true,
          message: '请填写收件人信息',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请填写收货地址',
          trigger: 'blur'
        }],
        magazineId: [{
          required: true,
          message: '选择杂志类型',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        custumerName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        email:
          [{
            required: true,
            message: '请输入电子邮箱',
            trigger: 'blur'
          },
            {
              pattern: /\S+@\S+\.\S+/,
              message: '邮箱格式错误',
              trigger: 'blur'
            }],
        company: [{
          required: true,
          message: '请输入单位或学校全称',
          trigger: 'blur'
        }],
        city: [{
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }]
      },
      payCode: payCode
    }
  }
  ,
  created() {
    this.getList()
  }
  ,
  methods: {
    /** 查询杂志管理列表 */
    getList() {
      this.loading = true
      this.queryParams.slae = 1
      listMagazine(this.queryParams).then(response => {
        this.magazineList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
      this.currentPrice = 0
    },

    // 表单重置
    reset() {
      this.formData = {
        id: null,
        mobile: null,
        custumerName: null,
        email: null,
        company: null,
        phone: null,
        magazineId: null,
        num: 1,
        totalPrice: 0,
        payType: 0,
        city: null,
        address: null,
        receiver: null,
        invoiceTitle: null,
        postcode: null,
        taxNo: null,
        remarks: null
      }
      this.resetForm('form')
    }
    ,
    addOrder(row) {
      this.reset()
      this.open = true
      this.orderTitle = '添加订单'
      this.currentPrice = row.price
      this.formData.magazineId = row.id
    },
    /** 修改按钮操作 */
    handleUpdateOrder(row) {
      this.reset()
      const id = row.id
      getOrder(id).then(response => {
        this.formData = response.data
        this.currentPrice = this.formData.price
        this.open = true
        this.orderTitle = '修改订单'
      })
    },
    /** 删除按钮操作 */
    handleDeleteOrder(row) {
      const ids = row.id
      this.$modal.confirm('是否确认删除订单数据项？').then(function() {
        return delOrder(ids)
      }).then(() => {
        this.getOrderList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formData.id != null) {
            updateOrder(this.formData).then(response => {
              this.$modal.msgSuccess('修改订单成功！')
              this.open = false
              this.getOrderList()
            })
          } else {
            addOrder(this.formData).then(response => {
              this.$modal.msgSuccess('提交订单成功！')
              this.open = false
              //打开订单列表框付款
              this.getOrderList()
            })
          }
        }
      })
    },
    //查询订单并弹窗
    getOrderList() {
      this.loading = true
      listUserOrder().then(response => {
        this.orderList = response.rows
        this.loading = false
      })
      this.orderTitle = '查阅订单'
      this.orderOpen = true
    },
    //付款方法
    handPay(row) {
      this.reset()
      this.payOpen = true
      const id = row.id
      getOrder(id).then(response => {
        this.formData = response.data
        this.sumMoney = this.formData.totalPrice
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.num {
  margin-top: 20px;
  font-size: 18px;
}

.totalprice {
  width: 100px;
  height: 36px;
  color: #fff;
  background-color: #67c23a;
  text-align: center;
  font-size: 24px;
  border-radius: 18px;
}

.collection {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;

}

.attention {
  font-size: 15px;
  color: #1c84c6;
}

.opear {
  display: flex;
  justify-content: center;
}

.bigButton {
  width: 120px;
  height: 40px;
  font-size: 18px;
  padding: 8px 8px;
  border-radius: 5px;
  color: #FFFFFF;
  border: 2px;
  border-radius: 20px;
  text-align: center;

  &:hover {
    cursor: pointer;
  }
}
.info{
  color: #1c84c6;
}
</style>
